|
一. 应用需求
在vue开发项目的过程中，需要在自己的页面框架中，引用别人做的页面功能，但又不想直接跳转，失去整个系统的统一性，只想在这个子页面（子路由里跳转），那么如何实现呢？ 
很简单！iframe就可以帮我们完成! 本文将以嵌入哔哩哔哩为例，实际开发中，你需要嵌入什么就嵌入什么，只需要在路由中更改名字和链接的url即可。
二、实现过程
1、侧边栏的实现
以下代码都是在sideMenu.vue侧边栏组件中实现 
1.1 template页面显示部分——为侧边栏绑定单击事件
哔哩哔哩
1.2 设置数据(data return部分)
data () {
return {
// …… 其他数据
graphItems: {
name:'哔哩哔哩',
path:'LinkHome'
}
// …… 其他数据
}
},
1.3 methods方法
methods:{
// …… 其他方法
onClickLeft() {
this.$router.go(-1);
},
gotoPage(path){
this.$router.push(path);
// store存储目标外链的url及要显示的标题
// link和title写在路由配置里的meta参数下
this.$store.state.iframeSrc = this.$route.meta.link
this.$store.state.iframeTitle = this.$route.meta.title
},
// …… 其他方法
}
2、在store.js中加上iframeSrc和iframeTitle两个值
state: {
...
iframeSrc:'',
iframeTitle: ''
},
3、vue-router路由的配置
routes: [
// 其他父级页面路由配置
{
path: '/system',
name: 'system',
component: resolve => require(['@/components/system/system'], resolve),
children: [
// 其他子页面路由配置
// 。。。
{
path: 'LinkHome',
name: 'LinkHome',
meta: {
// 之后你自己的项目中需要嵌入什么就改link属性值即可。
title: '哔哩哔哩',
link: 'https://www.bilibili.com/'
},
// 你的LinkHome.vue组件放的目录位置
component: resolve => require(['@/components/bilibili/LinkHome'], resolve)
},
// 其他页面路由配置
// 。。。
]
},
],
2、LinkHome.vue的实现
// 进度条的使用需要安装NProgress,并在main.js注册一哈
import NProgress from 'nprogress'
export default {
name: "LinkHome",
mounted() {
let iframe = document.getElementById('iframe')
NProgress.start()
iframe.onload = function() {
NProgress.done()
}
},
}
.trend-container2 {
position: relative;
width: 100%;
min-height: 700px;
padding-bottom: 16px;
}
给 iframe 的 src 属性绑定值，且为目标外部页面地址。即可嵌套加载外部页面。
页面加载状态使用NProgress。 需要安装NProgressnpm install --save nprogress; 并在main.js注册引入
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
在 vue.js 的 mounted 生命周期内，开始加载进度条。
NProgress.start()
获取 iframe 元素，当 iframe 页面加载完成后，关闭进度条。
iframe.onload = function() {
NProgress.done()
}
当后退或者关闭当前页面时，也应该一并关闭进度条提示。因为当页面还没有加载完时，后退或者关闭页面，将会导致进度条一直存在。
参考资料
https://segmentfault.com/a/1190000021601305 这个作者还引入了vant，为了响应页面中返回和叉掉两个按键的事件。 本项目中不需要，就省略了vant。
|